<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
    
    <!--  basic meta information -->
    <!--  meta informacion basica -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
    
    <title>My ARchitect World</title>

    <!-- Las experiencias están escritas en HTML y JavaScript y los métodos de llamada en el
    AR-namespace de Wikitude. Usted tiene que incluir esto en sus archivos HTML para usar el
    AR-namespace y el architectView para manejarlos correctamente -->
    <script src="https://www.wikitude.com/libs/architect.js"></script>
    <script src="../ade.js"></script>

    <!-- important for static POI loading - include the static data  -->
    <!-- importacion y carga de los POI estaticos - incluye datos estaticos  -->
    <script type="text/javascript" src="js/myjsondata.js"></script>

    <!-- jquery mobile CSS -->
    <!-- jquery movil CSS -->
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <!-- required to set background transparent & enable "click through" -->
    <!-- necesario para configurar el fondo transparente y permitir "hacer clic" -->
    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />

    <!-- jquery JS files -->
    <!-- archivos jquery JS -->
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>

    <!-- marker representation -->
    <!-- representacion marker -->
    <script type="text/javascript" src="js/marker.js"></script>

    <!-- World logic -->
    <!-- Logica World -->
    <script type="text/javascript" src="js/selectingpois.js"></script>
    <script type="text/javascript" src="js/presentingdetails.js"></script>

</head>
    
    <body >
     <div data-role="page" id="page1" style="background: none;" >
            
        <!-- MAIN PAGE CONTENT -->
        <!-- CONTENIDO DE LA PAGINA PRINCIPAL -->

         <!-- PANELS, ONLY VISIBLE ON DEMAND -->

         <!-- panel containing POI detail information -->
         <div data-role="panel" id="panel-poidetail" data-position="right" data-display="overlay" style="background-color:#F0F0F0;" data-theme="c">

             <!-- header with "close" button -->
             <div data-role="header" data-theme="c">
                 <h1>Detalles</h1>
                 <a href="#header" data-rel="close">Cerrar</a>
             </div>

             <!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
             <div data-role="content">

                 <!-- title -->
                 <h3 id="poi-detail-title"></h3>

                 <!-- image -->
                 <img id="poi-detail-image">

                 <!-- description -->
                 <h4 id="poi-detail-description"></h4>

             </div>
         </div>

        </div>

    </body>
    
</html>
